<template>
	<!-- uniapp中，view标签相当于div标签 -->
	<view class="home">
		<!-- 滚动条组件，scroll-x 是设置允许横向滚动 -->
		<scroll-view scroll-x class="navScroll">
			<!-- 下面用三元素算符给view标签做了一个判断，如果index==navIndex，就给view标签添加一个active类名，反之，就什么也不添加 -->
			<view class="item" :class="index===navIndex ? 'active' : ''" v-for="(item,index) in navArr"
				@click="clickNav(index,item.id)" :key="item.id">
				{{ item.classname }}
			</view>
		</scroll-view>
		<!-- 新闻列表展示区域 -->
		<view class="content">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<!-- 使用自定义组件newsbox，在uniapp中可以直接使用自定义组件，不需要手动引入自定义组件 -->
				<!-- 给newsbox绑定click点击事件，因为click是原生事件，而给组件绑定原生事件的时候，需要加上修饰符 native，否则组件会将其认作自定义事件 -->
				<newsbox @click.native="goDetail(item)" :item="item"></newsbox>
			</view>
		</view>
		<!-- 当newsArr数组为空，也就是没有新闻列表数据的时候，展示下面这个标签 -->
		<view class="noData" v-if="!newsArr.length">
			<image src="../../static/image/nodata.png" mode="widthFix"></image>
		</view>
		<!-- 加载中效果标签 -->
		<view class="loading" v-if="newsArr.length">
			<view class="text" v-if="loading==1">数据加载中...</view>
			<view class="text" v-if="loading==2">没有更多了~~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				// 存储导航栏列表数据
				navArr: [],
				// 存储新闻列表数据
				newsArr: [],
				// 当前新闻列表展示多少页数据，默认展示一页数据
				currentPage: 1,
				// 决定当前页面的状态是否处于 加载中，0 为默认状态，1为加载中状态，2为没有更多数据的状态
				loading: 0
			}
		},
		// 这是uniapp中的生命周期钩子，相当于vue中的onMounted
		onLoad() {
			this.getNavData()
			this.getNewsData()
		},
		// 这是uniapp定义的方法，当页面滚动触及底部的时候会触发这个方法
		onReachBottom(){
			// 如果loading值为2，说明没有数据可以加载出来了，那么就不再调用接口去请求数据
			if(this.loading === 2){
				return;
			}
			this.currentPage++		// 页面触底时，使得currentPage自增，也就是多展示一页数据
			this.loading = 1
			this.getNewsData()
		},
		methods: {
			// 顶部导航项的点击事件
			clickNav(index,id) {
				this.navIndex = index;
				this.currentPage = 1;
				this.loading = 0;
				// 清空新闻列表数据数组
				this.newsArr = []
				// 点击了导航栏项时，获取对应的id，调用接口方法，将id传递过去，根据id值获取新闻列表数据
				this.getNewsData(id)
			},
			// 子组件newsbox的点击事件回调
			goDetail(item) {
				// 跳转到新闻详情页，显示detail组件
				uni.navigateTo({
					// 调用接口，并且将cid和id作为参数传递给后端
					url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			// 获取导航栏列表数据的方法
			getNavData() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/navlist.php", // 请求地址
					success: res => { // 请求成功后的回调函数，res接收的是接口返回的数据
						// console.log(res);
						this.navArr = res.data
					}
				})
			},
			// 获取新闻列表数据的方法
			getNewsData(id=50) {	// 设置形参id的默认值为50
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data:{		// 调用请求时，要出传递给后端的数据
						cid: id,
						page: this.currentPage
					},
					success: (res) => {
						// 如果返回的数组数据长度为0，说明没有数据可以加载出来了
						if(res.data.length === 0){
							this.loading = 2
						}
						this.newsArr = [...this.newsArr,...res.data]	// 将获取到的新的数据数组res.data和旧的数组数据this.newArr进行拼接，再重新赋值给this.newArr
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.navScroll {
			// uniapp中的像素单位要使用rpx
			height: 100rpx;
			background: #F7F8FA;
			white-space: nowrap; // 使得当前这个类名对应的标签的子元素不换行
			position: fixed;
			top: var(--window-top); // uniapp的写法，使得当前滚动条标签贴合顶部标题栏
			left: 0;
			z-index: 10;

			// 解决顶部导航栏左右滚动时会显示滚动条
			/deep/ ::-webkit-scrollbar {
				width: 4px !important;
				height: 1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;
			}

			.item {
				display: inline-block;
				line-height: 100rpx;
				padding: 0 30rpx;
				font-size: 40rpx;

				&.active {
					color: #31c27c;
				}
			}
		}

		.content {
			padding: 30rpx;
			padding-top: 130rpx;

			.row {
				padding: 20rpx 0;
				border-bottom: 1rpx #e2e2e2 dotted;
			}
		}
		.noData {
			display: flex;
			justify-content: center;
			
			image{
				width: 360rpx;
			}
		}
		.loading {
			text-align: center;
			font-size: 26rpx;
			color: #888;
			
			view {
				line-height: 2em;
			}
		}
	}
</style>